<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport"
	      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>test_flex</title>
	
	<style>
		.content{
			width: 1000px; height: 632px;
			background: red;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			align-items:stretch ;
			margin: 0 auto;
		}
		.sub1{
			width: 609px; height: 377px;
			background: #e8e8e8;
			position: relative;
		}
		.sub2{
			width: 381px; height: 377px;
			background: #e8e8e8;
		}
		.sub3{
			width: 377px; height: 233px;
			background: #e8e8e8;
		}
		.sub4, .sub5, .sub6{
			width: 198px; height: 233px;
			background: #e8e8e8;
			align-self: flex-end;
		}
		.sub1 div{
			width: 245px; height: 243px;
			position: absolute;
			top: 55px;
			left: 65px;
		}
		.name{
			font-size: 32px;
			color: #333;
			margin-bottom: 0px;
			
		}
		.detail{
			font-size: 12px;
			margin-top: 0px;
			margin-bottom: 24px;
		}
		.price{
			font-size: 24px;
			color: #0AA1ED;
			margin-bottom: 12px;
		}
		.button{
			display: block;
			width: 130px; height: 40px;
			line-height: 40px;
			text-decoration: none; text-align: center;
			border-radius: 3px;
			background: linear-gradient(to bottom, #27b1f6, #0AA1ED);
			color: white;
		}
		.sub1 img{
			/*margin-top: -270px;*/
			/*margin-left: 190px;*/
			position: absolute;
			top: 56px;
			right: 30px;
			transition: 1s;
		}
		.sub1 img:hover{
			transform: scale(1.1);
		}
	</style>
	
</head>
<body>

<div class="content">
	<div class="sub1">
		<div>
			<p class="name">Apple MacBook Air系列</p>
			
			<p class="detail">酷睿双核i5处理器|256GB SSD|8GB内存|英特尔HD显卡620含共享显卡内存</p>
			
			<p class="price">￥6988.00</p>
			
			<a class="button" href="">查看详情</a>
		</div>
		<img src="img/study_computer_img1.png" alt="">
		
	</div>
	<div class="sub2"></div>
	<div class="sub3"></div>
	<div class="sub4"></div>
	<div class="sub5"></div>
	<div class="sub6"></div>
</div>















</body>
</html>